<template>
  <div class="header">
    <div class="l-content">
      <el-button @click="handleMenu" size="small">
        <component class="icons" is="menu"></component>
      </el-button>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/" class="bread">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-if="current" :to="current.path"> {{ current.label }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown trigger="click" size="small">
        <span class="el-dropdown-link">
          <img class="user" :src="getImageUrl('user')" alt="User Image" />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleUser">个人中心</el-dropdown-item>
            <el-dropdown-item @click="handleLogout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { useAllDataStore } from '@/stores';
import { useRouter } from 'vue-router';

const router = useRouter();

const getImageUrl = (user) => {
  return new URL(`../assets/images/${user}.png`, import.meta.url).href;
};

const store = useAllDataStore();
const handleMenu = () => {
  store.state.isCollapse = !store.state.isCollapse;
};
const current = computed(() => store.state.currentMenu);

const handleLogout = () => {
  router.push('/login'); // 跳转到登录页面
};
const handleUser = () => {
  router.push('/myUser'); // 跳转到个人中心页面
}

</script>

<style lang="less" scoped>
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  height:100%;
  background-color:#333;
}
.icons{
  width:20px;
  height:20px;
}
.l-content{
  display:flex;
  align-items:center;
  .el-button{
    margin-right:10px;
  }
}
.r-content{
  .user{
    width:40px;
    height:40px;
    border-radius:50%;
  }
}
:deep(.bread span){
  color:#fff !important;
  cursor:pointer !important;
}
</style>

